﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>宽仁妇孺，祝您五一快乐</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no" name="viewport">
	    <meta content="yes" name="apple-mobile-web-app-capable">
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <meta name="format-detection" content="telephone=no">
	    <meta name="format-detection" content="address=no">
	    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/page/weixin/popularize/51/animate.min.css"/>
	    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/page/weixin/popularize/51/animation.css"/>
	    
	    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/page/weixin/jweixin-1.0.0.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/page/weixin/popularize/popularize.js"></script>
		<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
		
	    <script type="text/javascript">
	
	  //微信js-sdk代码-start
	    wx.config({
	        debug: false, 
	        appId: '${appId}', 
	        timestamp: '${timestamp}', 
	        nonceStr: '${nonceStr}', 
	        signature: '${signature}',
	        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo'] 
	    });

	    wx.ready(function(){
	    	
	    	var title="宽仁妇孺，祝您五一快乐";
	    	var desc="女神？女汉子？";
	    	var link="http://www.kuanrf.com/pac/weixin/gotopage?pagename=popularize_51_index";
	    	var imgUrl="http://www.kuanrf.com/pac/images/popularize/51/girl1.jpg";
	    	
	    	//分享给朋友
	    	wx.onMenuShareAppMessage({
	    	    title: title, 
	    	    desc: desc, 
	    	    link: link,
	    	    imgUrl: imgUrl, 
	    	    type: 'link', 
	    	    dataUrl: '', 
	    	    success: function () { 
	    	        
	    	    },
	    	    cancel: function () { 
	    	        
	    	    }
	    	});
	    	
	    	//分享到朋友圈
	    	wx.onMenuShareTimeline({
	    	    title: desc, 
	    	    link: link, 
	    	    imgUrl: imgUrl, 
	    	    success: function () { 
	    	        
	    	    },
	    	    cancel: function () { 
	    	        
	    	    }
	    	});
	    	
	    	//分享到qq
	    	wx.onMenuShareQQ({
	    	    title: title, // 分享标题
	    	    desc: desc, // 分享描述
	    	    link: link, // 分享链接
	    	    imgUrl: imgUrl, // 分享图标
	    	    success: function () { 
	    	       
	    	    },
	    	    cancel: function () { 
	    	       
	    	    }
	    	});
	    	
	    	//分享到腾讯微博
	    	wx.onMenuShareWeibo({
	    	    title: title, 
	    	    desc: desc, 
	    	    link: link, 
	    	    imgUrl: imgUrl,
	    	    success: function () { 
	    	       
	    	    },
	    	    cancel: function () { 
	    	       
	    	    }
	    	});
	    	
	    });

	    wx.error(function(res){

	    });
	    //微信js-sdk代码-end
	    
	    $(function(){
	    	
	    	var touch='ontouchstart' in window;
			var touchstart=touch?'touchstart':'mousedown';
			var touchmove=touch?'touchmove':'mousemove'; 
			var touchend=touch?'touchend':'mouseup'; 		
    		var winth = $(window).width();
    		var height = $(window).height();
    		var size = $(".bd").length;
    		var index = 0;	    	
    		var starx,endx,movex;
    		$("body,html").width(winth);
    		$(".bd").width(winth);
    		$(".bd").height(height);
    		$(".slidebox").width(winth*size);
    		$(".slidebox .bd,.slidebox .bd.on").bind(touchstart,function(e){
    			e.preventDefault();
    			endx = 0;
    			starx=e.pagex?e.pageX:e.originalEvent.targetTouches[0].pageX;
    		});
    		
    		$(".slidebox .bd,.slidebox .bd.on").bind(touchmove,function(e){
    			e.preventDefault();	    			
    			$(".point").hide();
    			movex=e.pagex?e.pageX:e.originalEvent.targetTouches[0].pageX;	  	    			
    			endx=starx-movex;	    			
    			$(".slidebox ").css({'-webkit-transform':'translateX('+-(endx+winth*index)+'px)','-webkit-transition':'none'});
    		});
    		
    		$(".slidebox .bd,.slidebox .bd.on").bind(touchend,function(e){
    			e.preventDefault();
    			if(endx > winth/3){
    				if(index>=0  && index <size-1){
    					index++;	  
						$(".slidebox .bd").eq(index).addClass("on");
    				}
    				console.log("da");
    				$(".slidebox").css({'-webkit-transform':'translateX('+-winth*index+'px)','-webkit-transition':'all 0.5s'});
    			}else if(endx <-winth/3){
					if(index<=0){
						index==0;
					}else{
						index--;
					}	    
    				$(".slidebox").css({'-webkit-transform':'translateX('+-winth*index+'px)','-webkit-transition':'all 0.5s'});
    			}else{
    				$(".slidebox").css({'-webkit-transform':'translateX('+-winth*index+'px)','-webkit-transition':'all 0.5s'});
    			}
    			$(".hd a").eq(index).addClass("on").siblings().removeClass("on");

    		});
    		
    		$(".bd.last .fx").bind(touchstart,function(){
    			$(this).hide();
    		});
    		
    		var audio = document.getElementById("music");
    		audio.addEventListener('ended', function () {  
			   document.getElementById("music").play();
			}, false);
    		
    		$("#switch").click(function(){	    			
    			 if(audio!==null){             
                    if(!audio.paused)  
                    {                 
                    	$(this).addClass("on");
                        audio.pause();

                    }else{
                    	$(this).removeClass("on");
                    	audio.play();
                    }
            	}  
    		});
    		
	    });
	    </script>
	</head>
<body>
		<div class="switch" id="switch"><img src="${pageContext.request.contextPath}/images/popularize/51/music.png"/></div>
		<img src="${pageContext.request.contextPath}/images/popularize/51/point-120.png" class="point" />
		<div class="hd">
			<a href="javascript:;" class="on"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
		<div class="slidebox">			
			<section class="bd"  style="display: block;">
				<header class="box tc title">
					<img src="${pageContext.request.contextPath}/images/popularize/51/1.png" class="ui_top wa100" />
				</header>
				<div class="box">
					<img src="${pageContext.request.contextPath}/images/popularize/51/2.png" class="ui_left wa50 lady1"/>
					<img src="${pageContext.request.contextPath}/images/popularize/51/3.png" class="ui_right wa50 lady2"/>
					<img src="${pageContext.request.contextPath}/images/popularize/51/4.png" class="ui_fade wa100"/>
				</div>			
			</section>
			<section class="bd">
				<img src="${pageContext.request.contextPath}/images/popularize/51/bannder2_1.jpg" class="banner opacity1 wa40" />
				<img src="${pageContext.request.contextPath}/images/popularize/51/bannder2_2.jpg" class="banner opacity2" />
				<img src="${pageContext.request.contextPath}/images/popularize/51/bannder2_3.jpg" class="banner opacity3" />
			</section>
			<section class="bd">		
				<img src="${pageContext.request.contextPath}/images/popularize/51/bannder3_1.jpg" class="banner opacity1 wa40" />
				<img src="${pageContext.request.contextPath}/images/popularize/51/bannder3_2.jpg" class="banner opacity2" />
				<img src="${pageContext.request.contextPath}/images/popularize/51/bannder3_3.jpg" class="banner opacity3" />
			</section>
			<section class="bd"> 
			 	<img src="${pageContext.request.contextPath}/images/popularize/51/bannder4_1.jpg" class="banner opacity1 wa40" />
			 	<img src="${pageContext.request.contextPath}/images/popularize/51/bannder4_2.jpg" class="banner opacity2" />
			 	<img src="${pageContext.request.contextPath}/images/popularize/51/bannder4_3.jpg" class="banner opacity3" />
			</section>
			<section class="bd">		
				<img  src="${pageContext.request.contextPath}/images/popularize/51/banner5_1.jpg" class="banner opacity1 wa40"/>
				<img  src="${pageContext.request.contextPath}/images/popularize/51/banner5_2.jpg" class="banner opacity2"/>
				<img  src="${pageContext.request.contextPath}/images/popularize/51/banner5_3.jpg" class="banner opacity3"/>
			</section>
			<section class="bd">
				<img src="${pageContext.request.contextPath}/images/popularize/51/banner6.jpg" class="block" />
			</section>
			<section class="bd">		
				<img src="${pageContext.request.contextPath}/images/popularize/51/banner7.jpg" width="100%"  class="block" />
			</section>
			<section class="bd">	
				<div class="area1">
					<div class="cf">
						<img src="${pageContext.request.contextPath}/images/popularize/51/banner8_1_1.jpg" class="pic1 opacity_long1"/>
						<img src="${pageContext.request.contextPath}/images/popularize/51/banner8_1_2.jpg" class="pic2 opacity_long2"/>
						<img src="${pageContext.request.contextPath}/images/popularize/51/banner8_1_3.jpg" class="pic3 opacity_long3"/>				
					</div>
					<img src="${pageContext.request.contextPath}/images/popularize/51/banner8.png" class="opacity_long4  b8"/>					
				</div>
			</section>
			<section class="bd last">		
				<p class="cite">不管是女神还是女汉子<br />每个女人都渴望得到呵护<br />在这个节日里<br />宽仁舒媛会科学关爱女性<br />更懂你！</p>
				<img src="${pageContext.request.contextPath}/images/popularize/51/phone.jpg" class="phone" />
				<div class="cf"></div>
				<p class="gz animated">
					关注宽仁舒媛会，你就可以阅读权威妇科专家<br /> 的知识，可以报名参加各种公益讲座 <br />更多内容尽在关注后……
				</p>
				<div class="fx">
					<img src="${pageContext.request.contextPath}/images/popularize/51/fx_bubble.png" style="width: 30%;" />
				</div>
			</section>
		</div>		
		<audio autoplay="autoplay" id="music">
			<source src="${pageContext.request.contextPath}/images/popularize/51/music.mp3"></source>
		</audio>
	</body>
</html>
